<template>
  <div class="comment">
    <div class="comment-top">
      <!-- <router-link tag="div" :to="'/songList?id=' + this.myid" class="left">
        <span class="iconfont icon-arrow-left-bold"></span>
        评论
        <div class="ppp">({{ datas.total }})</div>
      </router-link> -->
      <div class="left" @click="previous">
        <span class="iconfont icon-arrow-left-bold"></span>
        评论
        <div class="ppp">({{ datas.total }})</div>
      </div>
      <div class="right iconfont icon-31fenxiang"></div>
    </div>
    <div class="headline">
      <div class="img">
        <img
          src="https://p2.music.126.net/IWcHuWNFz9TUVW0Uy_bIUQ==/109951163455659476.jpg?param=140y140"
        />
      </div>
      <div class="textw">
        <p>网易云最好听的歌曲</p>
        <div class="by">
          by
          <div class="ay">阿姨-1997</div>
        </div>
      </div>
      <div class="rigth iconfont icon-arrow-right-bold"></div>
    </div>
    <!-- 评论区 -->
    <van-sticky :offset-top="40">
      <div class="review">
        <div class="left">评论区</div>
        <div class="rigth">
          <p :class="[optionid == 1 ? '' : 'con']" @click="optionB">推荐</p>
          <p :class="[optionid == 2 ? '' : 'con']" @click="optionA">最新</p>
        </div>
      </div>
    </van-sticky>
    <!-- 评论区列表 -->
    <div class="reviewlist">
      <ul v-for="(item, index) in playcomments" :key="index">
        <li>
          <div class="reviewlist-top">
            <div class="img">
              <img :src="item.user.avatarUrl + '?param=140y140'" />
            </div>
            <div class="message">
              <div class="names">{{ item.user.nickname }}</div>
              <div class="times">{{ item.timeStr }}</div>
            </div>
            <div class="rigth">
              {{ item.likedCount }}
              <span
                @click="dotLike(item.commentId, item.liked)"
                class="iconfont icon-aixin"
              ></span>
            </div>
          </div>
          <p>
            {{ item.content }}
          </p>
          <div class="base">62条回复></div>
        </li>
      </ul>
    </div>
    <!-- 写评论 -->
    <div class="write">
      <div class="left">
        <van-field
          class="const"
          placeholder="写评论..."
          v-model="contentvalue"
        />
      </div>
      <div class="rigth" @click="send">发送</div>
    </div>
  </div>
</template>

<script>
import {
  getcomment,
  getcommentnew,
  getplaylist,
  getCommentLike,
} from "../api/search";
export default {
  data() {
    return {
      commentlist: null,
      comments: {
        totalCount: "",
      },
      myid: null,
      contentvalue: "",
      playcomments: "",
      datas: "", //评论数量
      optionid: "",
      isLike: 1,
    };
  },
  methods: {
    //返回上一页
    previous() {
      this.$router.go(-1);
      // console.log(this.$router.go(-1), "返回上一页");
    },
    // 获取评论
    getcommentFun() {
      console.log(this.$route, "$route");
      let id = this.$route.query.id;
      this.myid = id;
      if (!id) {
        return;
      }
      getcomment({ id: id, type: 2 }).then((data) => {
        // console.log(data, "歌单评论");
        this.commentlist = data.data.comments; //数量
        this.comments = data.data;
        // console.log(this.commentlist);
      });
    },
    // 点赞接口
    getCommentLikeFun() {
      getCommentLike({
        id: 2997207196,
        cid: this.idOfComment,
        t: 1,
        type: 2,
      }).then((data) => {
        console.log("点赞===>", data);
        // console.log("cid", this.idOfComment);
      });
    },
    // 评论点赞调用接口
    dotLike(id, like) {
      this.idOfComment = id;
      like ? (this.isLike = 0) : (this.isLike = 1);
      this.getCommentLikeFun();
      this.$toast({
        message: "收藏成功",
        position: "bottom",
      });
    },

    //最新
    optionA() {
      this.optionid = 1;
      let id = this.$route.query.id;
      this.myid = id;
      if (!id) {
        return;
      }
      getplaylist({ id: id, type: 2 }).then((data) => {
        // console.log(data, "全部歌单评论");
        this.playcomments = data.comments; //推荐
        this.datas = data;
        // console.log(this.playcomments, "推荐评论");
      });
    },
    //推荐
    optionB() {
      this.optionid = 2;
      let id = this.$route.query.id;
      this.myid = id;
      if (!id) {
        return;
      }
      getplaylist({ id: id, type: 2 }).then((data) => {
        // console.log(data, "全部歌单评论");
        this.playcomments = data.hotComments; //最新
        this.datas = data;
        console.log(this.playcomments, "最新评论");
      });
    },
    //发送评论
    getcommentnewFun() {
      // console.log(this.$route);
      let id = this.$route.query.id;
      let content = this.contentvalue;
      // this.myid = id;
      getcommentnew({ id, type: 2, t: 1, content }).then((data) => {
        console.log(data, "发送评论");
      });
    },
    //点击发送评论
    send() {
      this.getcommentnewFun(); //发送评论
      this.contentvalue = "";
    },
  },
  mounted() {
    this.getcommentFun(); //获取评论
    // this.getplaylistFun();
    this.optionB(); //获取推荐评论
  },
};
</script>

<style lang="less">
.comment {
  width: 100%;
  height: 100%;
  z-index: 250;
  background-color: #f7f9fc;
  position: relative;
  .comment-top {
    height: 46px;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: space-between;
    background-color: #ffffff;
    position: fixed;
    top: 0px;
    left: 0px;
    .left {
      height: 46px;
      line-height: 46px;
      text-align: center;
      font-size: 20px;
      display: flex;
      span {
        display: inline-block;
        width: 40px;
        height: 46px;
        font-size: 20px;
      }
      .ppp {
        font-size: 18px;
      }
    }
    .right {
      margin-right: 11px;
      height: 30px;
      line-height: 30px;
      margin-top: 7px;
      font-size: 24px;
    }
  }
  .headline {
    margin-top: 46px;
    display: flex;
    padding-left: 13px;
    padding-top: 15px;
    background-color: #fff;
    .img {
      height: 55px;
      width: 55px;
      img {
        height: 55px;
        width: 55px;
        border-radius: 3px;
      }
    }
    .textw {
      display: flex;
      flex-direction: column;
      margin-left: 8px;
      margin-bottom: 8px;
      flex: 1;
      p {
        height: 16px;
        line-height: 16px;
        font-size: 16px;
        margin-top: 8px;
      }
      .by {
        height: 30px;
        line-height: 30px;
        display: flex;
        font-size: 12px;
        .ay {
          color: #7599c0;
          font-size: 12px;
          margin-left: 3px;
        }
      }
    }
    .rigth {
      height: 55px;
      line-height: 55px;
      text-align: center;
      margin-right: 11px;
    }
  }
  .review {
    display: flex;
    margin-top: 6px;
    background-color: #fff;
    justify-content: space-between;
    .left {
      margin-left: 13px;
      font-size: 14px;
      height: 30px;
      line-height: 30px;
    }
    .rigth {
      display: flex;
      height: 30px;
      line-height: 30px;
      p {
        font-size: 14px;
        margin-right: 11px;
        margin-left: 5px;
        color: #aaaaaa;
        &.con {
          color: #333333;
          font-weight: 600;
        }
      }
    }
  }
  .reviewlist {
    background-color: #fff;
    li {
      display: flex;
      flex-direction: column;
      .reviewlist-top {
        display: flex;
        height: 45px;
        line-height: 45px;
        .img {
          width: 29px;
          height: 29px;
          line-height: 45px;
          margin-left: 13px;
          margin-right: 8px;
          margin-top: auto;
          margin-bottom: auto;
          img {
            width: 29px;
            height: 29px;
            border-radius: 50%;
          }
        }
        .message {
          flex: 1;
          display: flex;
          flex-direction: column;
          .names {
            height: 20px;
            line-height: 20px;
            font-size: 12px;
            color: #747474;
            margin-top: 7px;
          }
          .times {
            height: 9px;
            line-height: 9px;
            font-size: 12px;
            color: #b4b4b4;
            //   transform: scale(0.8);
          }
        }
        .rigth {
          font-size: 12px;
          color: #b5b5b5;
          .iconfont {
            font-size: 12px;
            margin-right: 13px;
          }
        }
      }
      p {
        margin-left: 48px;
        font-size: 13px;
        margin-right: 13px;
        line-height: 20px;
      }
      .base {
        margin-left: 48px;
        font-size: 12px;
        color: #7f9ec3;
        margin-top: 5px;
        padding-bottom: 10px;
        border-bottom: 2px solid #f9f9f9;
      }
    }
  }
  //   写评论
  .write {
    width: 100%;
    height: 40px;
    display: flex;
    position: fixed;
    bottom: 0px;
    left: 0px;
    .left {
      flex: 1;
      height: 40px;
      .const {
        padding: 8px 16px;
      }
    }
    .rigth {
      background-color: #fff;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      padding: 0px 8px;
      width: 40px;
      color: #dadada;
    }
  }
}
</style>